<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { ElContainer, ElHeader,ElMain} from 'element-plus'
import Menu from '@/components/Menu.vue'
import Header from './Header.vue'
import {useRefreshStore} from '@/stores/refresh'
import { storeToRefs } from 'pinia'
const refreshStore = useRefreshStore()
const { refresh } = storeToRefs(refreshStore)

import { useMenuStore } from '@/stores/menu'
const menuStore = useMenuStore()

</script>
<template>
    <el-container class="layout-box">
     <Menu></Menu>
      <el-container class="layout-content">
        <Header></Header>
        <el-main v-if="refresh">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
    
</template>
<style scoped>

.layout-box {
  width: 100vw;
  height: 100vh;
  display: flex;
}


.layout-content {
  margin-left: v-bind('menuStore.isCollapse ? "64px" : "200px"');
  transition: margin-left 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.common-layout .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.el-container .el-main {
  background: #fff;
}

.common-layout .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>